<template>
  <div class="waringDiv" @click="closeModal()">
    <div id="alertOverlay" class="alert-active">
      <div></div>
    </div>
    <div class="warningMain">
      <div class="topDiv">
        <div class="word2">
          <span>WARNING</span>
        </div>
        <div class="word">
          <p>请注意！！！</p>
          <p>{{ props.content }}</p>
        </div>
      </div>
      <div class="bottomDiv">
        <div class="word1">
          <span>07:13:17</span>
        </div>
        <div class="word2">
          <span>详情</span>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps(['content']);
const emit = defineEmits(["close"]);
const closeModal = () => {
  emit("close");
};
</script>

<style lang="less" scoped>
.waringDiv {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(74, 24, 18, 0.72);
  z-index: 990;

  .warningMain {
    width: 30vw;
    height: 30vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../../assets/imgs/waring.png") center no-repeat;
    background-size: 100% 100%;
    z-index: 999;

    .topDiv {
      width: 21.5vw;
      height: 10.8vh;
      position: absolute;
      top: 27%;
      left: 14%;
      position: relative;

      // border: 1px solid #fff;
      .word {
        width: 100%;
        margin: 0 0 0 5px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        // align-items: center;
        // justify-content: center;

        p {
          margin: 0;
          padding: 0;
          font-family: "YSBTH";
          color: #fefffb;
          font-size: 22px;
          letter-spacing: 0.5vh;
          text-shadow: 0 0 5px #ebe058, 0 0 10px #ebe058;
        }
      }

      .word1 {
        width: 100%;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;

        span {
          font-family: "YSBTH";
          color: #fefffb;
          font-size: 22px;
          letter-spacing: 1vh;
          text-shadow: 0 0 5px #ebe058, 0 0 10px #ebe058;
        }
      }

      .word2 {
        width: 100%;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;

        span {
          font-family: "YSBTH";
          color: #fefffb;
          font-size: 8vh;
          color: rgba(74, 24, 18, 0.5);
          text-shadow: 0 0 3px #d13e3e, 0 0 3px #d13e3e;
        }
      }
    }

    .bottomDiv {
      width: 21.5vw;
      height: 3vh;
      position: absolute;
      bottom: 24%;
      left: 14%;
      // border: 1px solid red;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1% 0 1%;
      box-sizing: border-box;

      .word1 {
        width: auto;

        span {
          font-family: "PingFangReg";
          color: #fefffb;
        }
      }

      .word2 {
        width: auto;
        display: flex;
        align-items: center;

        span {
          font-family: "PingFangReg";
          color: #fefffb;
        }

        .el-icon-arrow-right {
          font-size: 2vh;
          color: #f23838;
          margin-left: 0.2vh;
        }
      }
    }
  }

  #alertOverlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s;
  }

  #alertOverlay::before,
  #alertOverlay::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 100%;
  }

  #alertOverlay>div::before,
  #alertOverlay>div::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 120px;
  }

  #alertOverlay::before {
    background: linear-gradient(to right, red, transparent);
    top: 0;
    left: 0;
    transform: rotate(0deg);
  }

  #alertOverlay::after {
    background: linear-gradient(to left, red, transparent);
    top: 0%;
    left: calc(100% - 120px);
    transform: rotate(0deg) translate(0px, 0px);
  }

  #alertOverlay>div::before {
    background: linear-gradient(to top, red, transparent);
    top: 0;
    left: 0;
    transform: rotate(180deg);
  }

  #alertOverlay>div::after {
    background: linear-gradient(to top, red, transparent);
    top: calc(100% - 120px);
    left: 0;
    transform: rotate(0deg) translate(0px, 0px);
  }

  .alert-active {
    animation: blink 1s infinite;
  }

  @keyframes blink {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 0.5;
    }

    100% {
      opacity: 0;
    }
  }
}
</style>
